<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="${ctx}/js/ext-3.3.0/resources/css/ext-all.css"/>
<link href="${ctx}/css/css51.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/js/ext-3.3.0/ext-base.js"></script>
<script type="text/javascript" src="${ctx}/js/ext-3.3.0/ext-all.js"></script>
<script type="text/javascript" src="${ctx}/js/ext-3.3.0/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/maxlengthUtil.js"></script>
<title>后台用户管理  </title>
<style>
	.right{float:right;}
	.nleft {
	    float: left;
	    overflow: auto;
	    position: absolute;
	    width: 582px;
	}
</style>
<script type="text/javascript">
	var list;
	var win;
	var saveCommand;
	var store;
	Ext.onReady(function(){
    	store = new Ext.data.Store({
	       	proxy:new Ext.data.HttpProxy({
	       		url: '${ctx}/crmright/ajax/list'
	       	}),
	       	// 远程排序
	       	remoteSort : true,
	       	//读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
	       	reader:new Ext.data.JsonReader({
				root:"root",
	           	//从数据库中读取的总记录数
	           	totalProperty: 'count',
	           	fields:[
	                    'id','code','parentCode','type','text','url','rightDesc','rightSort'
	                   ]
			})
		});
		// 分页
  		var bbar= new Ext.PagingToolbar({
	        pageSize: 15,
	        store: store,
	        loadMask: this.LoadMask,
	        displayInfo: true,
	        displayMsg: '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',
	        emptyMsg: "没有数据"
	    });
	    // 复选框
  		var sm = new Ext.grid.CheckboxSelectionModel();//复选框
  		// 数据表格
		var cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer(),
		  	sm,
          	{header: "code", width: 50, sortable: true, dataIndex: 'code'},
          	{header: "名称", width: 120, sortable: false, dataIndex: 'text'},
          	{header: "类型", width: 120, sortable: false, dataIndex: 'type'},
          	{header: "描述", width: 120, sortable: false, dataIndex: 'rightDesc'},
          	{header: "顺序", width: 120, sortable: true, dataIndex: 'rightSort'},
          	{header: "操作", width: 120, sortable: true, dataIndex: 'id',
    		  id:"id",renderer:operateUrl,sortable:false}
    	]);
		var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"加载数据中,请等待......",store:store,removeMask :true});
	   
	    // 页面布局
	    var grid= new Ext.grid.GridPanel({
	    	id:'grid',
	    	layout : 'fit',
	    	//自动适应宽高
	        autoWidth:true,
	    	autoHeight : true,
	        width:document.body.clientWidth,
	        height:document.documentElement.clientHeight,
	    	//指定div的ID
	    	//el:'pageGrid',
	    	maskText : '正在加载中...',
	     	getLoadMask : function(){
	         	if(this.LoadMask){
	          		return this.LoadMask;
	         	}else{
	          		this.LoadMask = new Ext.LoadMask(Ext.getBody(),{msg:this.maskText,removeMask : true});
	          		return this.LoadMask;
	         	}
	        },
	        setMaskText : function(msg){
	        	this.maskText = msg;
	        	this.getLoadMask().msg = this.maskText;
	        },
     		store:store,
     		// 搜索区域
     		tbar : [
     			'code：',{id:'code',name:'code',xtype : 'textfield',emptyText :'输入code查询',width:"150"},
     			'类型：',{id:'type',name:'type',xtype : 'textfield',emptyText :'输入type查询',width:"150"},
	           	'名称：',{id:'text',name:'text',xtype : 'textfield',emptyText :'输入名称查询',width:"150"},
	           	'描述：',{id:'rightDesc',name:'rightDesc',xtype : 'textfield',emptyText :'输入描述查询',width:"150"}
     		],
     		listeners:{
     		'render':function(){
         		var tbar = new Ext.Toolbar({
         			cls :"right",
                	items:[
						goAction,addAction
					]
                });
         		tbar.render(grid.tbar);
				}
			},
			// 数据加载
         	cm:cm,
         	sm:sm,
         	viewConfig:{
          		forceFit: true
         	},  
         	frame:true,    
         	// 自动出现 expand/collapse toggle button, 上下收展的按纽   
         	titleCollapse: true, 
         	//collapsible: true,点击title也可以收展    
         	hideCollapseTool: true, 
         	//title:'用户投诉', // 表格标题    
         	header: false, 
         	// 不创建标题栏    
         	headerAsText: true, 
         	// 如果有标题栏, 隐藏标题栏    
         	iconCls:'icon-grid',  
         	//显示等待数据加载（loading）图标
         	loadMask: this.LoadMask,
         	//表格的工具栏    
         	/*tools:[ 
          	// 与title同一栏的按纽          
          	//{id:"save"},
          	{id:"help", 
          	handler:function(){
	          	Ext.Msg.alert('help','有问题？');}}, 
          	{id:"close",handler:function(){
     		Ext.Msg.alert('help','你想死啊');}}
           	// 按纽取值如下, close,minimize ,maximize ,restore ,gear ,pin ,unpin          
           	// toggle, down ,refresh ,minus ,plus ,help ,search ,save ,right ,left ,up  
          	],*/
          	//自带分页工具条
          	bbar: bbar
		});
   		 grid.render("pageGrid");
    	 query();
    });
    
    // 查询方法
    function query(){
    	code = Ext.getCmp("code").getValue();
		type = Ext.getCmp("type").getValue();
		text = Ext.getCmp("text").getValue();
		rightDesc = Ext.getCmp("rightDesc").getValue();
		store.baseParams = {
			code : code,
			type : type,
			text : text,
			rightDesc : rightDesc,
			limit:15
      	};
      	store.load();
    }
    // 查询按钮
    var goAction = new Ext.Action({
	    text:"<img src='${ctx}/images/query.png'>",
	    tooltip:'查询',
	    handleMouseEvents : false,
	    pressed : true,
	    handler: function(){
    		query();
	    }
    });
    // 新增按钮
	var addAction = new Ext.Action({
	    text:"<img src='${ctx}/images/add.png'>",
	    tooltip:'新增',
	    handleMouseEvents : false,
	    pressed : true,
	    handler: function(){
			addParenPerPage();
	    }
    });
    // 删除按钮
	var delAction = new Ext.Action({
	    text:"<img src='${ctx}/images/delete.png'>",
	    tooltip:'删除',
	    handleMouseEvents : false,
	    pressed : true,
	    handler: function(){
			var selections = Ext.getCmp("grid").getSelectionModel().getSelections();
			if(selections.length == 0 ){
			 	Ext.Msg.alert('错误','请选择要删除的数据');
				return ;
			}
			var ids = "";
			for(var i=0;i<selections.length;i++){
				ids += selections[i].get("id") + ",";
			}
			Ext.MessageBox.confirm('提示框', '您确定要删除记录？', function (button) {
                if (button == 'yes') {
					listDelete(ids.substring(0,ids.length-1));
                }
			});
	    }
    });
    
    // 新增二级权限
    function addSubPer (rowIndex) {
    	var temp = list.getAt(rowIndex);
    	var id = temp.get("id");
    	$("#parentId").val(id);
    	var parentName = temp.get("text");
    	$("#parentName").val(parentName);
    	addParenPerPage(1);
    }
    
    // 新增一级权限
    function addParenPerPage (ifAddSubPer) {
    	$("#addText").val("");
    	$("#addRightDesc").val("");
    	$("#addUrl").val("");
    	if (typeof(ifAddSubPer) == 'undefined') {
    		$("#parentId").val("");
    		$("#parentName").val("");
    	}
    	var title = "新增";
    	if ($("#parentName").val() != '') {
    		title = "新增“"+$("#parentName").val()+"”子权限";
    	}
    	if(!win){
			win = new Ext.Window({
				el:'hello-win',
				title:title,
				layout:'fit',
				width:520,
				height:240,
				hidden:true,
				resizable:false,
				closeAction:'hide',
				plain: true,
				contentEl : "addPer",
		        buttons: [{
			        text:'保存',
			        handler:  function(){
						ajaxAddFirstPer();
                    }
			    },
			    {
		            text: '取消', 
					handler: function(){
                        win.hide();
                    }
				}]
			});
		} else {
			win.setTitle(title);
		}
		win.show();
    }
    // 保存权限
    function ajaxAddFirstPer () {
    	var text = $("#addText").val();
    	var rightDesc = $("#addRightDesc").val();
    	var url = $("#addUrl").val();
    	var parentId = $("#parentId").val();
    	if (text == '') {
    		Ext.Msg("错误", "请输入权限名称!");
    		return;
    	}
    	setWinStyle(win, false);
    	$.ajax({
    		url : "${ctx}/crmright/ajax/addRightPer",
    		data:{
    			"text":text,
    			"rightDesc":rightDesc,
    			"url":url,
    			"parentId":parentId
 			},
 			dataType:"json",
 			type:"post",
 			success:function(data){
 				if(data.retCode == "S"){
 					Ext.Msg.alert("提示", data.retMsg);
 					store.reload();
 					setWinStyle(win, true);
 				} else {
 					Ext.Msg.alert("提示", data.retMsg);
 				}
 			},
 			error:function(){
 				Ext.Msg.alert("提示","操作失败！");
 			}
    	});
    }
    
    // 操作链接
    function operateUrl(value,cellmeta,record,rowIndex,columnIndex,store){
		cellmeta.attr += 'ext:qwidth="150" ';
		var tmp = "<a href='#' title='前移顺序'  onclick='updateSort(-1, "+rowIndex+")'>" + ('前移') + "</a>&nbsp;&nbsp;" + 
				  "<a href='#' title='编辑排序'  onclick='updateSortPage("+rowIndex+")'>" + ('编辑') + "</a>&nbsp;&nbsp;" + 
				  "<a href='#' title='后移顺序'  onclick='updateSort(1, "+rowIndex+")'>" + ('后移') + "</a>&nbsp;&nbsp;" + 
				  "<a href='#' title='查看,编辑子权限' onclick='updateSubPer("+rowIndex+")'>" + ('查看') + "</a>&nbsp;&nbsp;" +
				  "<a href='#' title='新增子权限' onclick='addSubPer("+rowIndex+")'>" + ('新增') + "</a>&nbsp;&nbsp;";
		list = store;
		return tmp;
	}
   
    var win2;
    function updateSortPage (rowIndex) {
    	$("#sortCount").val("");
    	$("#sortType").val("-1");
    	$("#id").val(list.getAt(rowIndex).get("id"))
    	if(!win2){
			win2 = new Ext.Window({
				el:'hello-win2',
				title:"移动顺序",
				layout:'fit',
				width:520,
				height:240,
				hidden:true,
				resizable:false,
				closeAction:'hide',
				plain: true,
				contentEl : "movePlace",
		        buttons: [{
			        text:'保存',
			        handler:  function(){
						ajaxSort();
                    }
			    },
			    {
		            text: '取消', 
					handler: function(){
                        win2.hide();
                    }
				}]
			});
		}
		win2.show();
    }
    // 查询子权限弹出层
    var win3
    function updateSubPer (rowIndex) {
    	$("#rowIndex").val(rowIndex);
   		var temp = list.getAt(rowIndex);
   		var id = temp.get("id");
   		var perName = temp.get("text");
		$.ajax({
    		url : "${ctx}/crmright/ajax/getSubPermission",
    		data:{
    			"id":id
 			},
 			dataType:"json",
 			type:"post",
 			success:function(data){
 				if(data.retCode == "S"){
 					var saveSelectRights = '';
 					if (data.crmRights.length > 0) {
 						for(var i = 0; i < data.crmRights.length; i++){
							saveSelectRights += '<tr>'
											  + '<td tabindex="0" class="x-grid3-col x-grid3-cell x-grid3-td-2 ">'
											  + '<div unselectable="on" class="x-grid3-cell-inner x-grid3-col-2">'+ data.crmRights[i].code +'</div>'
											  + '</td>'
											  + '<td tabindex="0" class="x-grid3-col x-grid3-cell x-grid3-td-3 ">'
											  + '<div unselectable="on" class="x-grid3-cell-inner x-grid3-col-3">'+data.crmRights[i].text+'</div>'
											  + '</td>'
											  + '<td tabindex="0" class="x-grid3-col x-grid3-cell x-grid3-td-6 ">'
											  + '<div unselectable="on" class="x-grid3-cell-inner x-grid3-col-6">'+data.crmRights[i].url+'</div>'
											  + '</td>'
											  + '<td tabindex="0" class="x-grid3-col x-grid3-cell x-grid3-td-6 ">'
											  + '<div unselectable="on" class="x-grid3-cell-inner x-grid3-col-6">'+data.crmRights[i].rightSort+'</div>'
											  + '</td>'
											  + '<td tabindex="0" class="x-grid3-col x-grid3-cell x-grid3-td-id x-grid3-cell-last ">'
											  + '<div ext:qwidth="150" unselectable="on" class="x-grid3-cell-inner x-grid3-col-id">'
											  +	'<a onclick="updateSubSort(-1, '+data.crmRights[i].id+')" title="前移顺序" href="#">前移</a>&nbsp;&nbsp;'
											  // + '<a onclick="updateSubSortPage(0)" title="编辑排序" href="#">编辑</a>&nbsp;&nbsp;'
											  + '<a onclick="updateSubSort(1, '+data.crmRights[i].id+')" title="后移顺序" href="#">后移</a>&nbsp;&nbsp;'
											  + '</div>'
											  + '</td>'
											  + '</tr>'
								
						}
 					} else {
 						saveSelectRights = '此菜单下无二级菜单，请先新增！';
 					}
					$("#dataTable").html(saveSelectRights);
 				} else {
 					Ext.Msg.alert("提示", data.retMsg);
 				}
 			},
 			error:function(){
 				Ext.Msg.alert("提示","操作失败！");
 			}
    	});    	
    	var title = "查看“"+perName+"”子权限";
    	if(!win3){
			win3 = new Ext.Window({
				el:'hello-win3',
				title:title,
				layout:'fit',
				width:600,
				height:300,
				hidden:true,
				resizable:false,
				closeAction:'hide',
				plain: true,
				contentEl : "subPermission",
		        buttons: [{
			        text: '取消', 
					handler: function(){
                        win3.hide();
                    }
			    }]
			});
		} else {
			win3.setTitle(title);
		}
		setWinStyle(win3, true);
		win3.show();
    }
    
    // 移动排序的保存按钮
    function ajaxSort () {
    	var sortCount = $("#sortCount").val();
    	var sortType = $("#sortType").val();
    	if (sortCount == null || sortCount == '' || sortCount == 0) {
    		Ext.Msg.alert("提示", "请输入移动的位数!");
    		return;
    	}
    	if (sortType == -1) {
    		sortCount = -1 * sortCount;
    	}
    	updateSort(sortCount, '');
    }
    
    // 移动父级排序
    function updateSort (sortCount, rowIndex) {
    	var id = $("#id").val();
    	if ((id == null || id.length == 0) && rowIndex != null && rowIndex >= 0) {
    		var tmp = list.getAt(rowIndex);
    		id = tmp.get("id");
    	}
    	if (win2) {
    		setWinStyle(win2, false);
    	}
    	$.ajax({
    		url : "${ctx}/crmright/ajax/updateSort",
    		data:{
    			"id":id,
    			"sortCount":sortCount
 			},
 			dataType:"json",
 			type:"post",
 			success:function(data){
 				if(data.retCode == "S"){
 					Ext.Msg.alert("提示", data.retMsg);
 					if (win2) {
			    		setWinStyle(win2, true);
			    	}
 					store.reload();
 				} else {
 					Ext.Msg.alert("提示", data.retMsg);
 				}
 			},
 			error:function(){
 				Ext.Msg.alert("提示","操作失败！");
 			}
    	});
    }
    
    // 移动子级级排序
    function updateSubSort (sortCount, id) {
    	if (win3) {
    		setWinStyle(win3, false);
    	}
    	$.ajax({
    		url : "${ctx}/crmright/ajax/updateSort",
    		data:{
    			"id":id,
    			"sortCount":sortCount
 			},
 			dataType:"json",
 			type:"post",
 			success:function(data){
 				if(data.retCode == "S"){
 					Ext.Msg.alert("提示", data.retMsg);
 					updateSubPer($("#rowIndex").val());
 					$("#"+win3.el.id).css("z-index", 9003);
 					win3.toBack();
 				} else {
 					Ext.Msg.alert("提示", data.retMsg);
 				}
 			},
 			error:function(){
 				Ext.Msg.alert("提示","操作失败！");
 			}
    	});
    }
	    
    // 设置弹出层样式
    function setWinStyle(extWin,isHide){
		$("#"+extWin.el.id).css("z-index",isHide == false ? 0 : 9003);
		if (isHide) {
			extWin.hide();
		}
	}
</script>
</head>

<body>
	<div id="pageGrid"></div>
	<input type="hidden" id="id"/>
	<input type="hidden" id="rowIndex"/>
	<!-- 新增/修改 -->
	<div id="hello-win" class="x-hidden">
		<div id="addPer" class="nleft scroll" style="background: white;height:170px;">
			<table width="482" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="100" height="30" align="center">名称</td>
					<td colspan="3">
						<input type="text" id="addText"/>
					</td>
				</tr>
				<tr bgcolor="#ECF1FA">
					<td width="100" height="30" align="center">描述</td>
					<td colspan="3">
						<input type="text" id="addRightDesc"/>
					</td>
				</tr>
				<tr>
					<td width="100" height="30" align="center">链接</td>
					<td colspan="3">
						<input type="text" id="addUrl"/>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- 弹出移动权限位置弹出层 -->
	<div id="hello-win2" class="x-hidden">
		<input type="hidden" id="parentId"/>
		<input type="hidden" id="parentName"/>
		<div id="movePlace" class="nleft scroll" style="background: white;height:170px;">
			<table width="482" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="100" height="30" align="center">方式</td>
					<td colspan="3">
						<select id="sortType" style="width:133px">
							<option value="-1">前移</option>
							<option value="1">后移</option>
						</select>
					</td>
				</tr>
				<tr bgcolor="#ECF1FA">
					<td width="100" height="30" align="center">位数</td>
					<td colspan="3">
						<input type="text" id="sortCount" maxlength="3" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^(\d-)]/g,''))" 
							onkeyup="value=value.replace(/[^(\d-)]/g,'') "/>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- 弹出子权限位置弹出层 -->
	<div id="hello-win3" class="x-hidden">
		<div id="subPermission" class="nleft" style="background: white;height:230px;">
			<table id="dataTable" cellspacing="0" cellpadding="0" border="0" style="width: 565px;" class="x-grid3-row-table">
			</table>
		</div>
	</div>
</body>
</html>